<template>
  <div class="user-avatar-dropdown">
    <Dropdown @on-click="handleClick">
      <span>{{ userAds }}</span>
      <Icon :size="18" type="md-arrow-dropdown"></Icon>
      <DropdownMenu slot="list">
        <DropdownItem name="onBack">返回</DropdownItem>
        <DropdownItem name="logout">退出登录</DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import "./user.less";
import { mapActions } from "vuex";
export default {
  name: "User",
  props: {
    userAds: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isFromLogin: false
    }
  },
  beforeRouteEnter (to, from, next) {
    if (from.name === 'login') {
      this.isFromLogin = true
    }
    next()
  },
  methods: {
    ...mapActions(["handleLogOut"]),
    // 退出登录
    logout() {
      localStorage.removeItem('userInfo')
      this.$router.push({
        name: "login",
      });
    },
    onBack() {
      if (!this.isFromLogin) {
        this.$router.go(-1)
      }
    },
    handleClick(name) {
      switch (name) {
        case "logout":
          this.logout();
          break;
        case "onBack":
          this.onBack();
          break;
      }
    },
  },
};
</script>
